<template>
	<view>
		<ur-card :index="2">
			5555
		</ur-card>


		<view class="search-bar">
			<view class="search_first" @click="SearchDatail">
				<uni-icons style="margin-left: 5%;" color="#e0e0e0" type="search" size="20"></uni-icons>
				<text>输入关键字检索</text>
			</view>
			<uni-icons style="margin-left: 3%;" @click="scan_click" type="scan" color="#fff" size="40"></uni-icons>
		</view>
		<view class="width-100">
			<view class="swiper">
				<swiper circular autoplay interval="3000">
					<swiper-item>
						<view class="imarseMan">
							<image class="imageYellow" src="http://106.14.56.171:15016/images/bg.png" mode=""></image>
							<image class="textImage" src="http://106.14.56.171:15016/images/text.png" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="ament">
				<view @click="engineeringProject()">
					<image class="aumentImg" src="http://106.14.56.171:15016/images/u215.png" mode="scaleToFill">
					</image>
					<image class="amentIcon" src="http://106.14.56.171:15016/images/u199.png" mode="scaleToFill">
					</image>
					<text>工程项目</text>
				</view>
				<view @click="industryMaterial()">
					<image class="aumentImg" src="http://106.14.56.171:15016/images/u222.png" mode=""></image>
					<image class="amentIcon" src="http://106.14.56.171:15016/images/u206.png" mode=""></image>
					<text>工业材料</text>
				</view>
			</view>
			<view class="msg">
				<view class="msgleft">
					<image src="http://106.14.56.171:15016/images/u245.png" mode=""></image>
				</view>
				<view class="msgcontent">
					<swiper style="height: 80rpx;" circular vertical="true" autoplay="true" interval="3000"
						duration="1000" display-multiple-items="2">
						<block v-for="(item,index) in fetchLatestList">
							<swiper-item v-if="index%2 == 0" @click="goTomessage">
								<view class="message">
									<image :class="{show:!item.isRead && item.pushTime}"
										src="http://106.14.56.171:15016/images/index/u265.png" />
									<text v-if="item.type == 3" class="akadj">消息：</text>
									<text v-if="item.type == 1" class="akadj">待办：</text>
									<text v-if="item.type == 2" class="akadj">公告：</text>
									<text class="jjn">{{item.content || '暂无数据'}}</text>
									<text class="jaha">{{item.pushTime || ''}}</text>
								</view>
							</swiper-item>
						</block>
					</swiper>
				</view>
				<view class="msgright">
					<image src="http://106.14.56.171:15016/images/u253.png" mode=""></image>
				</view>
			</view>
			<view class="service">
				<view><text class="titletext">工业服务</text></view>
				<view class="iconList">
					<block v-for="(item,index) in fetch" :key="item.serviceCode">
						<view @click="goToDatail(item)" v-if="index < 4">
							<image :src="item.icon" mode=""></image>
							<text style="font-size: 14px;">{{item.serviceName}}</text>
						</view>
					</block>
					<view @click="goToBar" class="serviceMore">
						<image src="http://106.14.56.171:15016/images/index/more.png">
						</image>
						<text>更多</text>
					</view>
				</view>
			</view>
			<!-- 经典案例 -->
			<view class="prj">
				<view class="prjtop">
					<text>经典案例</text>
					<text class="prjtext_right" @click="greater">更多&nbsp;...</text>
				</view>
				<view class="prj_box" v-for="(item,index) in classiCase" :key="item.prjCode"
					@click="jumProjectDetail(item)">
					<view class="prjlist_base">
						<view class="prjbase_left">
							<fileImage :src="item.coverPicUrl" :className="['cidental']" />
						</view>
						<view class="prjbase_right">
							<view><text class="prjname">{{item.prjName}}</text></view>
							<view>
								<text class="ownerSide">业主方</text>
								<text class="Servants">{{item.serviceOwner}}</text>
							</view>
							<view>
								<text class="ownerSide">服务方</text>
								<text class="Servants">{{item.serviceSeller_Zn}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		debounce,
		showLoading
	} from '@/config/debounce.js'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import fileImage from '@/components/fileImage/fileImage.vue'
	import {
		get
	} from 'https';
	export default {
		data() {
			return {
				PhotosHome: 'http://106.14.56.171:15016/images/phoneHoom/phoneHome.jpg',
				setingNum: '',
				setingNumber: '',
				androidIos: '',
				flage: false,
				companName: '', // 当前企业名称
				classiCase: '', //经典案例
				fetch: [], //获取设备维修服务类型
				//swipers: [],
				cid: '',
				timer: null,
				fetchLatestList: [{
						type: 2,
						title: "公告",
						content: "暂无公告",
						pushTime: null,
						isRead: 0
					},
					{
						type: 3,
						title: "消息",
						content: "暂无消息",
						pushTime: null,
						isRead: 0
					},
					{
						type: 1,
						title: "待办",
						content: "暂无待办",
						pushTime: null,
						isRead: 0
					},
					{
						type: 2,
						title: "公告",
						content: "暂无公告",
						pushTime: null,
						isRead: 0
					},
					{
						type: 3,
						title: "消息",
						content: "暂无消息",
						pushTime: null,
						isRead: 0
					},
					{
						type: 1,
						title: "待办",
						content: "暂无待办",
						pushTime: null,
						isRead: 0
					},
				], //获取最新消息待办列表
				fetchLatestFlag: true,
				limitLoad: false, // 防止重复加载
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		components: {
			fileImage
		},
		onShareAppMessage(res) {
			if (res.from === 'button') {
				// 来自页面内分享按钮
				console.log(res.target);
			}
			return {
				title: '易乓乒，不一样的工业服务', //自定义需要分享的名称
				imageUrl: this.PhotosHome
			};
		},
		onPullDownRefresh() {
			this.ifBottomRefresh = true;
			// this.fetchLatestMessage(); //获取最新消息待办
			// this.fetchsEquipment(); //获取设备维修服务类型
			// this.classCase(); //获取经典案例
			this.created()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
			setTimeout(() => {
				uni.hideLoading();
			}, 10000);
		},
		onShow() {
			this.companName = this.userInfo.corpName || '';
			this.cid = getApp().globalData.cid;
			var _that = this
			uni.getNetworkType({
				success: function(res) {
					//console.log(res); //网络类型 wifi、2g、3g、4g、ethernet、unknown、none
					if (res.networkType === "none") {
						// console.log('----------无网络时', res);
						_that.created()
					}
				}
			});
			this.created()
		},

		onLoad() {
			this.androidIos = getApp().globalData.androidIos
			//模拟ajax获取数据，uni.request({...});注意回调的this指向
			//this.swipers = ['http://106.14.56.171:15016/images/u56-1.png'];
			if (uni.getStorageSync("accessToken")) {
				this.bindCid()
			}
		},
		methods: {
			equipmentNetwork() {
				var token = uni.getStorageSync("accessToken");
				uni.request({
					url: 'api/ProjectTypeSerivce/GetServiceTypeList',
					data: {},
					header: {
						Authorization: "Bearer " + token
					},
					timeout: 1,
					fail(err) {}
				})
			},
			//vue中调用
			//等promiseone和promisetwo请求回来后，再去请求promisethress。
			//all()中的Promise对象执行先后顺序由自己快慢控制
			created: debounce(function() {
				showLoading({
					mask: true
				})
				Promise.all([this.fetchLatestMessage(), this.fetchsEquipment(), this.classCase()]).then(res => {
					uni.hideLoading();
					// console.log(res.length, '2572572257555');
					this.fetchLatestMessage(res[0])
					this.fetch = res[1];
					this.classiCase = res[2]
				}).catch((error) => {
					console.log(error.statusCode);
					if (error.statusCode == 0) {
						this.created();
						uni.showToast({
							title: '网络延迟，请刷新后重试',
							icon: 'none'
						})
					}
				})
			}, 300),
			// 获取设备维修服务类型
			fetchsEquipment() {
				return this.$http.get('api/ProjectTypeSerivce/GetServiceTypeList')
			},
			classCase() {
				return this.$http.get('api/Home/GetHomePrjInfoCaseList')
			},
			// 头部输入框跳转
			SearchDatail() {
				uni.navigateTo({
					url: '/pages/search/home_search'
				})
			},
			// 跳转到工业服务详情页面
			goToDatail(item) {
				uni.navigateTo({
					url: '/pages/service/service_detail/service_detail?item=' + JSON.stringify(item) + '&name=' +
						item.serviceName
				});
			},
			scan_click() {
				// #ifndef H5
				let that = this
				uni.scanCode({
					scanType: ['barCode', 'qrCode'],
					onlyFromCamera: true,
					success: function(res) {
						const {
							result
						} = res
						that.methodResolve(result)
						console.log(res)
					},
					fail: function(err) {
						console.log(err)
					}
				});
				// #endif
			},
			methodResolve(code) {
				if (!code) {
					uni.showToast({
						title: '扫码数据有误'
					})
					return
				}
				// 判断参数是否是url
				let urlCode = isURL(code)

				function isURL(str_url) { // 验证url
					var strRegex = "^((https|http|ftp|rtsp|mms)?://)"
					var re = new RegExp(strRegex);
					return re.test(str_url);
				}
				console.log(urlCode)
				if (urlCode) {
					let urlCodeList = code.split('?')
					if (!Array.isArray(urlCodeList)) {
						uni.showToast({
							title: '扫码数据有误',
							icon: 'none'
						})
						return
					}
					if (urlCodeList.length == 1) {
						uni.navigateTo({
							url: `/pages/webview/webaddress?webUrl=${encodeURIComponent(urlCodeList[0])}`
						})
						return
					}
					if (urlCodeList.length < 2) {
						uni.showToast({
							title: '扫码数据有误',
							icon: 'none'
						})
						return
					}
					uni.navigateTo({
						url: `/pages/transfer/transfer?${urlCodeList[1]}&webUrl=${urlCodeList[0]}`
					})
					return
				}
				// 判断是否是pc端扫一扫登录
				let CodeList = code.split(':')
				if (Array.isArray(CodeList) && CodeList.length >= 2) {
					if (CodeList[0] == 'empLg') {
						uni.navigateTo({
							url: `/pages/webview/scancode?code=${CodeList[1]}`
						})
						return
					}
				}
				// 不是url的时候
				let {
					type,
					parameter
				} = JSON.parse(code)
				console.log(type, parameter, code, '-----------')
				if (!type || !parameter) {
					uni.showToast({
						title: '扫码数据有误',
						icon: 'none'
					})
					return
				}
				switch (type) {
					//  设备详情
					case '1':
						uni.navigateTo({
							url: `/pages/project/project_detail/modules/project_equipment?epCode=${parameter}`
						})
						break;
						// 项目详情
					case '2':
						uni.navigateTo({
							url: `/pages/project/project_detail/project_detail?id=${parameter}`
						})
						break;
						// 其他
					default:
						uni.showToast({
							title: '没有此类型',
							icon: 'none'
						})
				}
			},
			// 获取最新消息待办
			fetchLatestMessage(res) {
				// console.log('获取最新消息待办公司', data);
				if (!res) {
					return this.$http.get('api/Home/GetHomeMessage', {
						companyName: this.companName
					})
				}
				if (!res.length) return
				this.fetchLatestList = res;
				let flag = res.every(el => {
					if (el.pushTime) {
						return false
					}
					return true
				})
				this.fetchLatestFlag = flag
				this.fetchLatestList.forEach(el => {
					//console.log(el);
					// 当前时间-推送时间
					if (!el.pushTime) return
					let pushTime = new Date(el.pushTime).getTime()
					let TimeDifference = this.getDateDiff(pushTime);
					// console.log(el.pushTime,TimeDifference);
					el.pushTime = TimeDifference;
				})
				this.fetchLatestList = [...this.fetchLatestList, ...this.fetchLatestList];
			},
			// 当前时间-推送时间
			getDateDiff(dateTimeStamp) {
				var result = ''
				var minute = 1000 * 60
				var hour = minute * 60
				var day = hour * 24
				var month = day * 30
				var year = month * 12 //年
				var now = new Date().getTime()
				var diffValue = now - dateTimeStamp
				if (diffValue < 0) return
				var yearC = diffValue / year //年
				var monthC = diffValue / month //月
				var weekC = diffValue / (7 * day) //周
				var dayC = diffValue / day //天
				var hourC = diffValue / hour //小时
				var minC = diffValue / minute //分
				if (yearC >= 1) {
					result = "" + parseInt(yearC) + "年前"
				} else if (monthC >= 1) {
					result = "" + parseInt(monthC) + "月前"
				} else if (weekC >= 1) {
					result = "" + parseInt(weekC) + "周前"
				} else if (dayC >= 1) {
					result = "" + parseInt(dayC) + "天前"
				} else if (hourC >= 1) {
					result = "" + parseInt(hourC) + "小时前"
				} else if (minC >= 1) {
					result = "" + parseInt(minC) + "分钟前"
				} else {
					result = "刚刚"
				}
				return result
			},
			goToBar() {
				uni.switchTab({
					url: './../service/index'
				});
			},
			// 调转工业材料页面
			industryMaterial() {
				uni.navigateTo({
					url: './../material/index'
				})
			},
			//跳转到项目页面
			engineeringProject() {
				uni.switchTab({
					url: '/pages/project/index'
				})
			},
			// 跳转到消息待办
			goTomessage() {
				uni.switchTab({
					url: './../message/index'
				})
			},
			// 点击经典案例的"更多",跳转到taber项目页面
			greater() {
				uni.navigateTo({
					url: './../project/project_copy'
					// url: '/pages/broadcast/broadlist'
				})
			},
			// 点击跳转到项目详情
			jumProjectDetail(item) {
				uni.navigateTo({
					url: './../project/project_detail/project_detail?id=' + item.prjInfoId
				})
			},
			flages() {
				this.flage = !this.flage;
			},
			bindCid() {
				console.log('推送消息cid', this.cid);
				this.$httpNew.get(`authApi/user/BindCid?cid=${this.cid}`).then(res => {
					console.log(res, '推送消息');
				})
			}
		}
	};
</script>

<style lang="less" scoped>
	.search_first {
		background-color: #ffffff;
		height: 80rpx;
		width: 80%;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		margin-left: 3%;
		justify-content: start;

		>text {
			font-size: 14px;
			margin-left: 10rpx;
			color: #8f8f8f;
		}
	}

	.width-100 {
		width: 100%;
		border-top-left-radius: 25rpx;
		border-top-right-radius: 25rpx;
		background-color: #f5f5f7;
		display: flex;
		align-items: center;
		/*垂直居中*/
		flex-direction: column;
	}

	.search-bar {
		background-color: #b5001e;
		display: flex;
		align-items: center;

		>text {
			padding-left: 2%;
			color: #ffffff;
		}
	}

	.swiper {
		height: 285rpx;
		width: 100%;
	}

	// 指示点颜色
	.swiper /deep/ .wx-swiper-dot-active {
		background: #ffffff;
	}

	.corner_5 {
		height: 100%;
		width: 100%;
	}

	.imarseMany {
		width: 100%;
		height: 100%;
		background-image: url(http://106.14.56.171:15016/images/banner.png);
		background-size: auto;
		color: #FFFFFF;

		>view {
			position: relative;
			top: 60rpx;
			margin-left: 40rpx;
		}

		>view:nth-child(1) {
			font-size: 40rpx;
		}

		>view:nth-child(2) {
			margin-top: 25rpx;
			background-color: #FFFFFF;
			width: 55%;
			height: 4rpx;
		}

		>view:nth-child(3) {
			margin-top: 15rpx;

		}

		>image {
			position: relative;
			top: -150rpx;
			left: 220rpx;
			height: 285rpx;
			width: 100%;
		}
	}

	.imarseMan {
		margin: auto;
		width: 100%;
		height: 100%;
		background-color: #b5001e;

		.imageYellow {
			margin-top: 4%;
			margin-left: 2%;
			width: 95%;
			height: 70%;
		}

		.textImage {
			position: absolute;
			left: 0;
			right: 25%;
			bottom: 0;
			top: -5%;
			margin: auto;
			width: 50%;
			height: 55%;
			z-index: 9;
		}
	}


	.dian {
		position: absolute;
		left: 0;
		top: 10rpx;
		height: 285rpx;
		width: 100%;
		// background-color: aqua;
		z-index: 999;

		>image {
			margin-top: -100rpx;
			margin-left: 320rpx;
		}
	}

	.ament {
		/* height:200rpx; */
		border-radius: 25rpx;
		width: 96%;
		background-color: #ffffff;
		display: flex;
		flex-wrap: wrap;
		z-index: 99;
		margin-top: -15rpx;
		margin-bottom: 4rpx;
	}

	.ament view {
		width: 50%;
		/* height: 200rpx; */
		position: relative;
		text-align: center;
		// background-color: aqua;
	}

	.aumentImg {
		// background-color: red;
		height: 170rpx;
		width: 85%;
		// margin-left: 7%;
		margin-top: 20rpx;
		margin-bottom: 15rpx;
	}

	.ament .amentIcon {
		width: 80rpx;
		height: 70rpx;
		position: absolute;
		top: 20rpx;
		left: 50rpx;
	}

	.ament text {
		position: absolute;
		right: 26%;
		top: 90rpx;
		font-family: '微软雅黑 Bold', '微软雅黑';
		font-weight: 700;
		font-style: normal;
		font-size: 40rpx;
		color: #ffffff;
	}

	.msg {
		width: 96%;
		background-color: #fff;
		margin-top: 10rpx;
		padding-top: 20rpx;
		padding-bottom: 15rpx;
		border-radius: 25rpx;
		display: flex;
		justify-content: space-between;
		// flex-wrap: wrap;
	}

	.msgleft {
		width: 12%;
		justify-content: center;
		/* 子元素水平居中 */
		align-items: center;
		/* 子元素垂直居中 */
		display: -webkit-flex;
	}

	.msgleft image {
		width: 40rpx;
		height: 40rpx;
	}

	// 轮播最外盒子
	.msgcontent {
		width: 80%;
		height: 80rpx;
		font-size: 23rpx;
		// overflow: hidden;
		overflow-y: scroll;
		// background-color: aqua;
	}

	.msgcontent .textleft {
		padding-left: 2%;
	}

	// 文本溢出文字显示省略号
	.message {
		width: 574rpx;
		display: flex;

		// 消息公告前面的红点
		>image {
			position: relative;
			top: 14rpx;
			width: 13rpx;
			height: 13rpx;
			z-index: 199999;
			visibility: hidden;

			&.show {
				visibility: visible;
			}
		}
	}

	.message>text:nth-child(2) {
		margin-left: 20rpx;
		font-weight: 480;
	}

	.message>text:nth-child(3) {
		font-weight: 490;
		text-align: left;
		width: 340rpx;
		height: 38rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.message>text:nth-child(4) {
		padding-left: 20rpx;
		color: #858585;
	}

	.msgright {
		width: 10%;
		justify-content: center;
		/* 子元素水平居中 */
		align-items: center;
		/* 子元素垂直居中 */
		display: -webkit-flex;
	}

	.msgright image {
		width: 20rpx;
		height: 20rpx;
	}

	.service {
		width: 96%;
		height: 205rpx;
		background-color: #fff;
		margin-top: 2%;
		border-radius: 25rpx;
		display: flex;
		flex-wrap: wrap;

		>view {
			width: 100%;
		}

		>view:nth-child(1) {
			margin-top: 20rpx;
		}
	}


	.iconList {
		width: 100%;
		background-color: #ffffff;
		display: flex;
		justify-content: space-between;
		border-radius: 25rpx;
		font-size: 22rpx;

		>view {
			width: 20%;
			height: 105rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;

			>image {
				width: 60rpx;
				height: 60rpx;
			}
		}

		.serviceMore {
			// background-color: aqua;
			font-size: 29rpx;

			>image {
				margin-right: 45rpx;
			}

			>text {
				margin-right: 45rpx;
			}
		}
	}

	.prj {
		width: 96%;
		background-color: #fff;
		margin-top: 2%;
		border-radius: 25rpx;
		margin-bottom: 40px;
	}



	.prjname {
		margin-left: 10rpx;
		font-size: 14px;
		color: #333333;
		font-weight: 700;
		font-family: '微软雅黑 Bold', '微软雅黑';
	}

	.prjtop {
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		>text:nth-child(1) {
			margin-left: 4%;
			font-size: 16px;
			font-weight: 800;
		}

		>text:nth-child(2) {
			margin-right: 6%;
			color: #666666;
			font-size: 12px;
		}
	}

	.titletext {
		margin-left: 4%;
		font-size: 16px;
		font-weight: 800;
	}

	.prj_box {
		margin: auto;
		width: 92%;
		padding-bottom: 10rpx;
		// background-color: aqua;
	}

	.prjlist_base {
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		// background-color: brown;
	}

	.prj_box>view:nth-last-child(1) {
		border: none;
	}

	.prjbase_left {
		width: 20%;
	}

	.prjbase_right {
		width: 80%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		// background-color: skyblue;
		.ownerSide {
			padding: 0 10rpx 0 10rpx;
			font-size: 26rpx;
			color: #999999;
		}

		.Servants {
			font-size: 26rpx;
			color: #333333;
		}
	}

	// .prjbase_right>view:nth-child(2n+1) {
	// 	background-color: aqua;
	// }

	// .prjbase_right_text {
	// 	padding: 0 10rpx 0 10rpx;
	// 	font-size: 26rpx;
	// 	color: #616161;
	// 	opacity: 0.6;
	// }

	// .prjbase_right text:nth-child(1) {
	// 	font-size: 26rpx;
	// 	color: #333333;
	// }

	.akadj {
		font-size: 28rpx;
	}

	.jjn {
		margin-top: 7rpx;
		font-size: 22rpx;
		opacity: 0.6;
	}

	.jaha {
		font-size: 22rpx;
		margin-top: 7rpx;
	}

	.promptBox {
		display: flex;
		flex-direction: column;
		align-items: center;

		>view {
			display: flex;
			flex-direction: column;
			align-items: center;

			>image {
				width: 600rpx;
				height: 1000rpx;
			}
		}

		.closeeBox {
			width: 600rpx;
			background-color: #fff;
			text-align: center;
			padding-bottom: 20rpx;

			>text {
				position: relative;
				top: 10rpx;
				left: 140px;
			}

		}

	}
</style>
<style lang="scss" scoped>
	.cidental {
		position: relative;
		top: 6rpx;
		width: 116rpx;
		height: 116rpx;
		border-radius: 7rpx;
	}
</style>